<template>
  <div style="width:100%;clear:both;height:100%;">
    <div v-for="(src,index) in filePath.split(',')" :key="index" class="block"
         style="width:100px;float:left;margin:5px;height:100px;">
      <el-image style="width: 100px; height: 100px" :src="pics[index]" fit="cover"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
//定义组件名称
defineOptions({
  name: "ImageView"
});
//接收的参数
const props = defineProps({
  filePath: {type: String, default: "", required: false},
});
// @ts-ignore
import {ref, onMounted, watchEffect, getCurrentInstance, watch} from 'vue'

const pics = ref<any>([]);

onMounted(() => {
  pics.value = [];
  changeImage();
})
//监听变化返回
watch(() => props.filePath, async () => {
  pics.value = [];
  changeImage();
});

// @ts-ignore
const {proxy} = getCurrentInstance();
const changeImage = () => {
  let files: any = props.filePath.split(',');
  for (let i = 0; i < files.length; i++) {
    proxy.$http.imagesSrc('', files[i]).then((url: string) => {
      pics.value[i] = url;
    });
  }
}

</script>

<style scoped>

</style>